<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>数据可视化</title>
    <link rel="stylesheet" href="../css/datavisible.css">
    <script src="../js/echarts.min.js"></script>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../js/map/china.js"></script>
</head>

<body>
    <div class="main">
        <!-- 顶部 -->
        <div class="top">
            <span class="title">大数据智慧校园云平台</span>
            <span id="nowtime" class="time2"></span><span class="time1">当前时间：</span>
        </div>
        <!-- 左侧 -->
        <div class="left">
            <!-- 左侧顶部 -->
            <div class="left-top">
                <div class="left-title">各学院学生数量</div>
                <div class="left-graph" id="graph1"></div>
                <div class="left-footer"></div>
            </div>
            <!-- 左侧中央 -->
            <div class="left-center">
                <div class="left-title">折线图-学习变化</div>
                <div class="left-graph" id="graph2"></div>
                <div class="left-footer"></div>
            </div>
            <!-- 左侧底部 -->
            <div class="left-bottom">
                <div class="left-title">饼形图-教师分布</div>
                <div class="left-graph" id="graph3"></div>
                <div class="left-footer"></div>
            </div>
        </div>
        <!-- 中央 -->
        <div class="center">
            <!-- 中央顶部 -->
            <div class="center-top">
                <div class="no">
                    <div class="no-hd">
                        <ul>
                            <li>125811</li>
                            <li>4563</li>
                        </ul>
                    </div>
                    <div class="no-bd">
                        <ul>
                            <li>在校大学生人数</li>
                            <li>在上课学生人数</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 中央底部 -->
            <div class="center-bottom" id="graph7">
                <button id="back" class="hidden"></button>
                <div id="china-map"></div>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
            <!-- 右侧顶部 -->
            <div class="right-top">
                <div class="right-title">柱状图-开发技能</div>
                <div class="right-graph" id="graph4"></div>
                <div class="right-footer"></div>
            </div>
            <!-- 右侧中央 -->
            <div class="right-center">
                <div class="right-title">折线图-人员流动</div>
                <div class="right-graph" id="graph5"></div>
                <div class="right-footer"></div>
            </div>
            <!-- 右侧底部 -->
            <div class="right-bottom">
                <div class="right-title">饼形图-各地区学生占比</div>
                <div class="right-graph" id="graph6"></div>
                <div class="right-footer"></div>
            </div>
        </div>
    </div>
    <script src="../js/datavisible.js"></script>
    <script type="text/javascript">
        function gettime() {
            var time = new Date();
            var arr = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            var hour = time.getHours();
            var min = time.getMinutes();
            var sec = time.getSeconds();
            var madetime = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + " " + arr[time
                .getDay()] + "  " + hour + (min < 10 ? ":0" : ":") + min + (sec < 10 ? ":0" : ":") + sec + (hour <
                12 ? " am" : " pm");
            document.getElementById("nowtime").innerText = madetime;
        }
        gettime(); //显示第一秒的时间
        setInterval("gettime()", 1000);


    </script>

</body>

</html>